<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>个人中心 - 解压一刻</title>
  <link rel="stylesheet" href="../styles.css" />
  <link rel="stylesheet" href="views.css" />
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
  <div class="app-container">
    <!-- 顶部状态栏 -->
    <header class="app-header profile-header">
      <div class="page-title">
        <h2>个人中心</h2>
      </div>
      <button class="settings-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"></circle>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
        </svg>
      </button>
    </header>

    <!-- 主内容区 -->
    <main class="main-content profile-main">
      <!-- 用户信息 -->
      <section class="user-info">
        <div class="user-avatar">
          <img src="../assets/avatar.png" alt="用户头像" />
          <button class="edit-avatar">更换头像</button>
        </div>
        <div class="user-details">
          <h2 id="profileUserName">朋友</h2>
          <p class="user-status">已使用 32 天</p>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-value">12</span>
              <span class="stat-label">评估次数</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">36</span>
              <span class="stat-label">游戏时长</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">8</span>
              <span class="stat-label">音效使用</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 会员卡片 -->
      <section class="membership-card">
        <div class="card-icon">
          <lottie-player
            src="https://assets2.lottiefiles.com/packages/lf20_7A6z7h.json"
            background="transparent"
            speed="1"
            style="width: 100%; height: 100%"
            loop
            autoplay
          ></lottie-player>
        </div>
        <div class="card-details">
          <h3>普通会员</h3>
          <p>升级至高级会员，解锁全部功能</p>
          <ul class="premium-features">
            <li>• 无限制访问所有解压游戏</li>
            <li>• 高级环境音效库</li>
            <li>• 详细压力分析报告</li>
          </ul>
        </div>
        <button class="upgrade-btn">立即升级</button>
      </section>

      <!-- 功能菜单 -->
      <section class="profile-menu">
        <div class="menu-section">
          <h3>我的数据</h3>
          <div class="menu-items">
            <a href="#" class="menu-item">
              <span class="menu-icon">📊</span>
              <span class="menu-text">压力报告</span>
              <span class="menu-arrow">→</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">🎮</span>
              <span class="menu-text">游戏记录</span>
              <span class="menu-arrow">→</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">🔊</span>
              <span class="menu-text">音效收藏</span>
              <span class="menu-arrow">→</span>
            </a>
          </div>
        </div>

        <div class="menu-section">
          <h3>设置</h3>
          <div class="menu-items">
            <a href="#" class="menu-item">
              <span class="menu-icon">👤</span>
              <span class="menu-text">个人信息</span>
              <span class="menu-arrow">→</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">🔔</span>
              <span class="menu-text">通知设置</span>
              <span class="menu-arrow">→</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">🌙</span>
              <span class="menu-text">深色模式</span>
              <label class="switch">
                <input type="checkbox">
                <span class="slider round"></span>
              </label>
            </a>
          </div>
        </div>

        <div class="menu-section">
          <h3>关于</h3>
          <div class="menu-items">
            <a href="#" class="menu-item">
              <span class="menu-icon">❓</span>
              <span class="menu-text">帮助中心</span>
              <span class="menu-arrow">→</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">📝</span>
              <span class="menu-text">用户反馈</span>
              <span class="menu-arrow">→</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">📄</span>
              <span class="menu-text">隐私政策</span>
              <span class="menu-arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      <!-- 退出登录 -->
      <button class="logout-btn">退出登录</button>
    </main>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
      <a href="../index.html" class="nav-item" data-page="home">
        <span class="nav-icon home-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
          </svg>
        </span>
        <span class="nav-text">首页</span>
      </a>
      <a href="games.html" class="nav-item" data-page="games">
        <span class="nav-icon games-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="6" width="20" height="12" rx="2"></rect>
            <line x1="6" y1="12" x2="10" y2="12"></line>
            <line x1="8" y1="10" x2="8" y2="14"></line>
            <circle cx="16" cy="12" r="2"></circle>
            <circle cx="18" cy="10" r="1"></circle>
          </svg>
        </span>
        <span class="nav-text">游戏</span>
      </a>
      <a href="assessment.html" class="nav-item" data-page="assessment">
        <span class="nav-icon assessment-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="20" x2="18" y2="10"></line>
            <line x1="12" y1="20" x2="12" y2="4"></line>
            <line x1="6" y1="20" x2="6" y2="14"></line>
            <rect x="2" y="20" width="4" height="1"></rect>
            <rect x="8" y="20" width="4" height="1"></rect>
            <rect x="14" y="20" width="4" height="1"></rect>
          </svg>
        </span>
        <span class="nav-text">评估</span>
      </a>
      <a href="profile.html" class="nav-item active" data-page="profile">
        <span class="nav-icon profile-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </span>
        <span class="nav-text">我的</span>
      </a>
    </nav>
  </div>

  <script src="profile.js"></script>
</body>
</html>